<style>
@media print {
  ._wz_hiddenDangersTroubleshootDetails{
    -webkit-print-color-adjust: exact;
    height: inherit !important;
  }
}
</style>
<template>
  <div ref="hiddenDangersTroubleshootDetails" class="_wz_hiddenDangersTroubleshootDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="16%">
        <col width="16%">
        <col width="16%">
        <col width="16%">
        <col width="16%">
        <col width="16%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">
          隐患排查
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
            打印
          </Button>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">风险名称</td>
        <td colspan="5">{{!!riskListDetailEntityList.riskPointName ? riskListDetailEntityList.riskPointName : '--'}}</td>
      </tr>
      <tr>
        <td style="text-align: center;">档案编号</td>
        <td colspan="2">{{!!riskListDetailEntityList.riskCheckNumber ? riskListDetailEntityList.riskCheckNumber : '--'}}</td>
        <td style="text-align: center;">运输企业</td>
        <td colspan="2">{{!!riskListDetailEntityList.deptName ? riskListDetailEntityList.deptName : '--'}}</td>
      </tr>
      <tr>
        <td style="text-align: center;">排查日期</td>
        <td>{{!!riskListDetailEntityList.riskCheckDate ? riskListDetailEntityList.riskCheckDate : '--'}}</td>
        <td style="text-align: center;">排查阶段</td>
        <td>{{!!riskListDetailEntityList.riskCheckPhase ? riskListDetailEntityList.riskCheckPhase : '--'}}</td>
        <td style="text-align: center;">排查周期</td>
        <td>
          <Tag color="blue" v-if="riskListDetailEntityList.riskCheckCycle == 0">不限</Tag>
          <Tag color="blue" v-if="riskListDetailEntityList.riskCheckCycle == 1">每天</Tag>
          <Tag color="blue" v-if="riskListDetailEntityList.riskCheckCycle == 2">每周</Tag>
          <Tag color="blue" v-if="riskListDetailEntityList.riskCheckCycle == 3">每旬</Tag>
          <Tag color="blue" v-if="riskListDetailEntityList.riskCheckCycle == 4">每月</Tag>
          <Tag color="blue" v-if="riskListDetailEntityList.riskCheckCycle == 5">每季</Tag>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">排查类型</td>
        <td>{{!!riskListDetailEntityList.riskPointTypeName ? riskListDetailEntityList.riskPointTypeName : '--'}}</td>
        <td style="text-align: center;">风险状态</td>
        <td>
          <Tag color="error" v-if="!!riskListDetailEntityList.riskCheckState">有风险</Tag>
          <Tag color="primary" v-else>无风险</Tag>
        </td>
        <td style="text-align: center;">风险处理</td>
        <td>
          <template v-if="riskListDetailEntityList.riskCheckState == 1">
            <Tag color="error" v-if="riskListDetailEntityList.riskHandleState == 0">未整改</Tag>
            <Tag color="success" v-else>已整改</Tag>
          </template>
          <Tag color="primary" v-else>无风险</Tag>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">排查人员</td>
        <td>{{!!riskListDetailEntityList.riskCheckPerson ? riskListDetailEntityList.riskCheckPerson : '--'}}</td>
        <td style="text-align: center;">风险数量</td>
        <td>{{!!riskListDetailEntityList.riskCheckCount ? riskListDetailEntityList.riskCheckCount : 0}}</td>
        <td style="text-align: center;">整改数量</td>
        <td>{{!!riskListDetailEntityList.riskHandleCount ? riskListDetailEntityList.riskHandleCount : 0}}</td>
      </tr>
      <tr>
        <td style="text-align: center;">处理意见</td>
        <td colspan="5">{{!!riskListDetailEntityList.riskHandleProposal ? riskListDetailEntityList.riskHandleProposal : '--'}}</td>
      </tr>
      <tr>
        <td style="text-align: center;">检查照片</td>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
              <img :src="!!riskListDetailEntityList.riskCheckImg?apiUrl.imgUrl + riskListDetailEntityList.riskCheckImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
        <td style="text-align: center;">签字照片</td>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
              <img :src="!!riskListDetailEntityList.riskCheckSignImg?apiUrl.imgUrl + riskListDetailEntityList.riskCheckSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" style="border-top: 0px;">
      <colgroup>
        <col>
        <col width="16%">
        <col width="16%">
        <col width="16%">
        <col width="16%">
        <col width="16%">
        <col width="16%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="7">排查清单</td>
      </tr>

      <template v-for="item,index in riskCheckDetailList">
        <tr>
          <td :rowspan="item.riskItemCheckState == 1?8:3" style="border-top: 3px solid #515a6e;"><Tag color="blue">{{index+1}}</Tag></td>
          <td style="border-top: 3px solid #515a6e;">风险项目</td>
          <td style="border-top: 3px solid #515a6e;">{{!!item.riskItemCheckName?item.riskItemCheckName:'--'}}</td>
          <td style="border-top: 3px solid #515a6e;">风险等级</td>
          <td style="border-top: 3px solid #515a6e;">
            <Tag color="primary" v-if="item.riskItemGrade == 1">低风险</Tag>
            <Tag color="success" v-else-if="item.riskItemGrade == 2">一般风险</Tag>
            <Tag color="warning" v-else-if="item.riskItemGrade == 3">一般风险</Tag>
            <Tag color="error" v-else>重大风险</Tag>
          </td>
          <td style="border-top: 3px solid #515a6e;">排查结果</td>
          <td style="border-top: 3px solid #515a6e;">
            <Tag color="warning" v-if="item.riskItemCheckState == 1">不合格</Tag>
            <Tag color="success" v-else>合格</Tag>
          </td>
        </tr>
        <tr>
          <td>责任人员</td>
          <td>{{!!item.riskCheckPerson?item.riskCheckPerson:'--'}}</td>
          <td>责任部门</td>
          <td>{{!!item.riskCheckDept?item.riskCheckDept:'--'}}</td>
          <td>排查时间</td>
          <td>{{!!item.riskItemWhenDate?item.riskItemWhenDate:'--'}}</td>
        </tr>
        <tr>
          <td>风险内容{{item.riskCheckState}}</td>
          <td colspan="5">{{!!item.riskItemCheckContent?item.riskItemCheckContent:'--'}}</td>
        </tr>

        <template v-if="item.riskItemCheckState == 1">
          <tr>
            <td>问题描述</td>
            <td colspan="5">{{!!item.riskDescribe?item.riskDescribe:'--'}}</td>
          </tr>
          <tr>
            <td>检查照片</td>
            <td colspan="2">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item.riskCheckImg?apiUrl.imgUrl + item.riskCheckImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
            <td>整改签字</td>
            <td colspan="2">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item.riskCheckSignImg?apiUrl.imgUrl + item.riskCheckSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
          </tr>
          <tr>
            <td>整改结果</td>
            <td colspan="2">{{!!item.riskItemResult?item.riskItemResult:'--'}}</td>
            <td>整改时间</td>
            <td colspan="2">{{!!item.riskItemCompletionDate?item.riskItemCompletionDate:'--'}}</td>
          </tr>
          <tr>
            <td>整改措施</td>
            <td colspan="5">{{!!item.riskItemControl?item.riskItemControl:'--'}}</td>
          </tr>
          <tr>
            <td>整改照片</td>
            <td colspan="2">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item.riskHandleImg?apiUrl.imgUrl + item.riskHandleImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
            <td>整改签字</td>
            <td colspan="2">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item.riskHandleSignImg?apiUrl.imgUrl + item.riskHandleSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
          </tr>
        </template>
      </template>
      </tbody>
    </table>

  </div>
</template>
<script>

export default {
  props: ['riskListData'],//接收来自父组件的数据
  data() {
    return {
      riskListDetailEntityList:{},
      riskCheckDetailList:[],
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.axios.post(that.apiUrl.webApi + '/safety/risk/riskCheckInfo', {uuid: that.riskListData.uuid}).then(res => {
      if (!!res) {
        that.riskListDetailEntityList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })


    that.axios.post(that.apiUrl.webApi + '/safety/risk/riskCheckDetailList', {checkUuid: that.riskListData.uuid}).then(res => {
      if (!!res) {
        that.riskCheckDetailList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })
  },
  methods: {//执行的方法
    printTest() {
      this.$print(this.$refs.hiddenDangersTroubleshootDetails) // 使用
    },
    //导出
    deriveData() {
      var that = this;
      that.spinShow = true;
      that.axios.post(that.apiUrl.webApi + "/safety/risk/riskCheckDetailExport", {uuid: that.riskListData.uuid}).then(res => {
        that.spinShow = false;
        if (!!res) {
          window.open(that.apiUrl.imgUrl + res.data.data)
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    window.onresize = null;
  }
}
</script>
<style lang="less">
._wz_hiddenDangersTroubleshootDetails {
  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 18px;
      padding-right: 18px;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 200px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
